(() => {
    new Vue({
        el: '#pie1',
        data: {
            resdata: [], //返回的数据
            Data: [],//各专业数据
            Index: 0,//所选专业的下标
            stu_classArr: [],
            avgGpaArr: [],  
            Array:[]
        },
        created() {
            this.conn()
        },
        mounted() {
            this.getData()
            this.getIndex()
            this.altIndex()
            this.drawEcharts()

        },
        methods: {
            //连接api
            conn() {
                axios
                    .all([
                        axios.get('http://localhost:8001/getLinear/getDashujuLinear'),
                        axios.get('http://localhost:8001/getLinear/getJisuanjiyingyongLinear'),
                        axios.get('http://localhost:8001/getLinear/getRuanjiangongchengLinear'),
                        axios.get('http://localhost:8001/getLinear/getRuanjianjishuLinear'),
                        axios.get('http://localhost:8001/getLinear/getWangluogongchengLinear'),
                        axios.get('http://localhost:8001/getLinear/getWangluojishuLinear'),
                        axios.get('http://localhost:8001/getLinear/getWulianwangLinear'),
                        axios.get('http://localhost:8001/getLinear/getXinxiguanliLinear'),
                    ])
                    .then(response => (
                        this.resdata = response
                        // console.log("response:", this.resdata)
                    ))
            },

            //解析resdata 解析后台数据
            getData() {
                setTimeout(() => {
                    // console.log("getData:", this.resdata)
                    for (i = 0; i < this.resdata.length; i++) {
                        this.Data.push(this.resdata[i].data)
                    }
                    // console.log("Data:", this.Data)
                }, 500)
            },

            //获得点击下标
            getIndex() {
                setTimeout(() => {
                    window.index = 0
                    $('.sell').change(function () {
                        index = this.selectedIndex
                        // console.log("selectedIndex/window.index:", index)
                    })

                }, 500)
            },

            //赋值Index
            altIndex() {
                setTimeout(() => {
                    $('.sell').change(() => {
                        this.Index = index
                        // console.log("赋值Index:", this.Index)
                    })
                }, 1000)
            },

            //分别把相应专业的stu_name取出为列表
            getStu_class() {
                arr = []
                this.stu_classArr.length = 0
                setTimeout(() => {
                    arr = this.Data[this.Index]
                    for (i = 0; i < arr.length; i++) {
                        this.stu_classArr.push(arr[i].stu_class)
                    }
                }, 555)
                // console.log("this.stu_classArr:",this.stu_classArr)
            },

            //分别把相应专业的avgScore取出为列表
            getAvgGpa() {
                arr = []
                this.avgGpaArr.length = 0
                setTimeout(() => {
                    arr = this.Data[this.Index]
                    for (i = 0; i < arr.length; i++) {
                        this.avgGpaArr.push(arr[i].avgGpa)
                    }
                }, 555)
                // console.log(" this.avgGpaArr:",  this.avgGpaArr)
            },

            

            //=====echarts======
            drawEcharts() {
                setTimeout(() => {

                    this.Array.length=0
                    for (i = 0; i < this.stu_classArr.length; i++){
                        this.Array.push({
                            "name":this.stu_classArr[i],
                            "value":this.avgGpaArr[i]
                        })
                    }

                    myChart = echarts.init(document.getElementById('pie2')),
                    colorList = [{
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: '#18387f'// 0% 处的颜色
                            
                        },
                        {
                            offset: 1,
                            color: 'rgba(12,210,230,0.2)' // 100% 处的颜色
                            
                        }],
                    }, {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: '#3751E6' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: 'rgba(55,81,230,.2)' // 100% 处的颜色
                        }]
                    }, {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: '#18387f' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: 'rgba(24,56,127,.7)' // 100% 处的颜色
                        }]
                    }, {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: '#008DEC' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: 'rgba(0,141,236,.2)' // 100% 处的颜色
                        }]
                    }, {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: '#114C90' // 0% 处的颜色
                        },  {
                            offset: 1,
                            color: 'rgba(17,76,144,.2)' // 100% 处的颜色
                        }]
                    }]
                    var option = {
                        calculable: true,
                        tooltip:{
                            formatter:function(param){
                                
                                return param.name+':'+param.value
                            }
                        },
                        series: [{
                            // name: '漏斗图',
                            type: 'funnel',
                            left: '10%',
                            right:'10%',
                            top: '10%',
                            bottom: '10%',
                            min: 0,
                            max: 10,
                            minSize: '0%',
                            maxSize: '80%',
                            sort: 'ascending',
                            gap: 3,
                            label: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: false,
                                    formatter:function(param){
                                        console.log(param)
                                        return param.percent+'%'
                                    },
                                    color: function(param) {
                                        return textColorList[param.dataIndex]
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: false,
                                    color: function(param) {
                                        return textColorList[param.dataIndex]
                                    },
                                    opacity: 1
                                }
                            },
                            itemStyle: {
                                normal: {
                                    borderColor: 'transparent',
                                    color: function(param) {
                                        return colorList[param.dataIndex]
                                    }
                                }
                
                            },
                            data: this.Array
                        }]
                    };
                
            
                myChart.setOption(option);
                window.addEventListener("resize", function() {
                    myChart.resize();
                });
                }, 600)
            }
            //=====echarts======

            

        },
        watch: {
            Index: {
                immediate: true,
                handler(newValue, oldValue) {
                    // console.log("Index被修改了", newValue, oldValue);
                    this.getStu_class()
                    this.getAvgGpa()
                    this.drawEcharts()
                }
            }
           

        }

    })
})();